<template>
  <el-dialog v-model="innerProjectVisible" width="90%" top="5vh" title="选择项目" append-to-body>
    <el-form :model="searchForm">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="项目类别">
            <el-select v-model="searchForm.categoryId" filterable placeholder="请选择项目类别">
              <el-option
                v-for="item in serviceTypeList"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-input v-model="searchForm.projectName" placeholder="请输入服务项目名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-pagination
      class="mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <div class="dialog-content">
      <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="项目类别" prop="categoryName"></el-table-column>
        <el-table-column label="项目名称" prop="projectName"></el-table-column>
        <el-table-column label="工时费" prop="manHourAmount">
          <template #default="{ row }"> ¥{{ row.manHourAmount }} </template></el-table-column
        >
      </el-table>
    </div>
    <div class="flex justify-center mt-4">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handleSumbitProject">确定</el-button>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElTable, ElMessage } from "element-plus";
import { useInitTable } from "@/hooks/useCommon";
import { getProjectTypeListApi, getServiceProjectApi } from "@/api/repair";

const emit = defineEmits(["submit"]);
// 表格
const { tableData, searchForm, currentPage, limit, total, handleRestSearch, handleGetTableList } =
  useInitTable({
    searchForm: {
      categoryId: "",
      projectName: ""
    },
    getTableList: getServiceProjectApi
  });

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<any[]>([]);
//项目弹框
const innerProjectVisible = ref(false);
// 添加项目-按钮
const open = () => {
  innerProjectVisible.value = true;
};
// 选择项目-多选
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
// 选择项目-取消
const close = () => {
  innerProjectVisible.value = false;
};
// 选择项目-确定
const handleSumbitProject = () => {
  if (!multipleSelection.value.length) {
    return ElMessage.warning("请选择项目");
  }
  emit("submit", multipleSelection.value);
};

// 重置选中项
const handleRestProject = () => {
  multipleSelection.value = [];
  multipleTableRef.value!.clearSelection();
  innerProjectVisible.value = false;
};

// 获取项目分类列表
const serviceTypeList: any = ref([]);
const handleGetProjetType = async () => {
  const res = await getProjectTypeListApi();
  serviceTypeList.value = res as any;
};

onMounted(async () => {
  handleGetProjetType();
});

defineExpose({
  open,
  close,
  handleRestProject
});
</script>
<style scoped lang="scss">
.dialog-body {
  height: calc(100vh - 260px);
  overflow-y: auto;
}
.dialog-content {
  height: calc(100vh - 300px);
  overflow-y: auto;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
